<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="common/head.jsp"%>
<html lang="en">
<div class="layui-body introduce_body">
    <div style="padding: 15px">
        <section class="introduce_sec">
            <!-- Swiper -->
            <div class="swiper-container layui-container">
                <div class="swiper-wrapper">
                    <c:if test="${labDataList!=null}">
                        <c:forEach var="lab" items="${labDataList}">
                            <div class="swiper-slide">
                                <div class="content_box">
                                    <div class="img_div">
                                        <img src="${lab.labPicture}" alt="实验室图片" class="queto" style="width: 100%">
                                    </div>
                                    <div class="text">
                                        <div class="line_div"></div>
                                        <div class="content">
                                            <h3 style="margin-top: 15px;margin-bottom: 15px;text-align: center">${lab.labName}</h3>
                                        </div>
                                        <div class="detial">
                                            <p>${lab.labIntroduce}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </c:if>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </section>
    </div>
</div>
<%@include file="/jsp/user/common/foot.jsp" %>
</body>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
</html>
